<template>
  <div class="div">
    <!-- <Header :title="title"></Header> -->
    <div @click="chaxun">
      <van-search
        :value="sousuo"
        v-model="sousuo"
        shape="round"
        background="#54DF39"
        placeholder="请输入搜索关键词"
      />
    </div>

    <div class="left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item :title="index.fl" v-for="(index,key) in fenlei " :key="key" />
      </van-sidebar>
    </div>

    <div class="right">
      <van-grid column-num="3" v-if="activeKey==0">
        <van-grid-item text="文字">
          <img src="@/assets/fenlei/K30 Pro变焦版.jpg" class="imgwg" />
          <font class="wgzt">K30 Pro变焦版</font>
        </van-grid-item>
        <van-grid-item text="文字">
          <img src="@/assets/fenlei/K30 Pro.jpg" class="imgwg" />
          <font class="wgzt">K30 Pro</font>
        </van-grid-item>
        <van-grid-item text="文字">
          <img src="@/assets/fenlei/黑鲨手机3.jpg" class="imgwg" />
          <font class="wgzt">黑鲨手机3</font>
        </van-grid-item>
        <van-grid-item text="文字">
          <img src="@/assets/fenlei/黑鲨手机3 Pro.jpg" class="imgwg" />
          <font class="wgzt">黑鲨手机3 Pro</font>
        </van-grid-item>
        <van-grid-item text="文字">
          <img src="@/assets/fenlei/小米10 Pro.jpg" class="imgwg" />
          <font class="wgzt">小米10 Pro</font>
        </van-grid-item>
        <van-grid-item text="文字">
          <img src="@/assets/fenlei/小米10.jpg" class="imgwg" />
          <font class="wgzt">小米10</font>
        </van-grid-item>
        <van-grid-item text="文字">
          <img src="@/assets/fenlei/Redmi K30 4G.jpg" class="imgwg" />
          <font class="wgzt">Redmi K30 4G</font>
        </van-grid-item>
        <van-grid-item text="文字">
          <img src="@/assets/fenlei/Redmi K30 5G.jpg" class="imgwg" />
          <font class="wgzt">Redmi K30 5G</font>
        </van-grid-item>
        <van-grid-item text="文字">
          <img src="@/assets/fenlei/小米MIX Alpha.jpg" class="imgwg" />
          <font class="wgzt">小米MIX Alpha</font>
        </van-grid-item>
      </van-grid>
      <div v-if="activeKey==1">
        <div class="xilie"></div>
        <van-divider
          contentPosition="center"
          customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
        >数字系列</van-divider>
        <van-grid column-num="3">
          <van-grid-item text="文字">
            <img src="@/assets/fenlei/小米10 Pro.jpg" class="imgwg" />
            <font class="wgzt">小米10 Pro</font>
          </van-grid-item>
          <van-grid-item text="文字">
            <img src="@/assets/fenlei/小米10.jpg" class="imgwg" />
            <font class="wgzt">小米10</font>
          </van-grid-item>
        </van-grid>
        <div class="xilie"></div>
        <van-divider
          contentPosition="center"
          customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
        >CC系列</van-divider>
        <van-grid column-num="3">
          <van-grid-item text="文字">
            <img src="@/assets/fenlei/小米CC9.jpg" class="imgwg" />
            <font class="wgzt">小米CC9</font>
          </van-grid-item>
          <van-grid-item text="文字">
            <img src="@/assets/fenlei/小米CC9e.jpg" class="imgwg" />
            <font class="wgzt">小米CC9e</font>
          </van-grid-item>
          <van-grid-item text="文字">
            <img src="@/assets/fenlei/小米CC9 美图版.jpg" class="imgwg" />
            <font class="wgzt">小米CC9 美图版</font>
          </van-grid-item>
        </van-grid>
        <div class="xilie"></div>
        <van-divider
          contentPosition="center"
          customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
        >MIX系列</van-divider>
        <van-grid column-num="3">
          <van-grid-item text="文字">
            <img src="@/assets/fenlei/小米MIX Alpha.jpg" class="imgwg" />
            <font class="wgzt">小米MIX Alpha</font>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return {
      title: "分类",
      sousuo: "",
      activeKey: 0,
      fenlei: [
        { fl: "新品" },
        { fl: "手机" },
        { fl: "电视" },
        { fl: "大家电" },
        { fl: "小家电" },
        { fl: "电脑" },
        { fl: "办公耗材" },
        { fl: "路由器" },
        { fl: "鼠标" },
        { fl: "生活电器" },
        { fl: "小爱音响" },
        { fl: "厨卫电器" },
        { fl: "车载出行" }
      ]
    };
  },
  methods: {
    ...mapMutations(["xg"]),
    ...mapMutations(["userxg"]),
    ...mapMutations(["yxxg"]),
    ...mapMutations(["xggwcsz"]),
    chaxun() {
      this.$router.push("/chaxun");
      this.xg(true);
    }
  },
  computed: {
    ...mapState(["poot"]),
    ...mapState(["yx"]),
    ...mapState(["zhuantai"])
  }
};
</script>
<style scoped>
.div {
  margin-bottom: 50px;
}
.left {
  float: left;
}

.imgwg {
  height: 50px;
  width: 50px;
}
.wgzt {
  font-size: 5px;
  margin-top: 5px;
}
.xilie {
  height: 10px;
}
</style>